<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>腾讯布局作业</title>
		<link rel="stylesheet" href="./layui/css/layui.css">
		<style>
			*{margin: 0;padding: 0;}
			.content{
				width: 1194px;
				height: 1872px;
				margin: 0 auto;
				background-color: springgreen;
				padding: 0 15px;
			}
			/* 媒体查询 */
			@media(max-width:1225px) {
				.content{
					width: calc(100% - 30px);
				}
			}
			
			.color1{
				background-color: hotpink;
				height: 620px;
			}
			.color2{
				background-color: crimson;
				height: 620px;
			}
			@media(max-width:820px) {
				.color1{
					height: 520px;
				}
				.color2{
					height: 520px;
				}
			}
			@media(max-width:640px) {
				.my-xs{
					width: 100%;
				}
			}
			
			
		</style>
	</head>
	<body>
		<!-- space代表里面的栅格间隔15px -->
		<div class="content layui-row layui-col-space15">
			<div class="layui-col-xs12 layui-col-sm8">
				<div class="layui-row layui-col-space15">
					<div class="layui-col-xs12">
						<div class="color1"></div>
					</div>
					<div class="layui-col-xs6 my-xs">
						<div class="color2"></div>
					</div>
					<div class="layui-col-xs6 my-xs">
						<div class="color1"></div>
					</div>
					<div class="layui-col-xs12">
						<div class="color2"></div>
					</div>
				</div>
			</div>
			<div class="layui-col-xs12 layui-col-sm4">
				<div class="color2">321</div>
			</div>
		</div>
	</body>
</html>
